/**
 * EditorMenu module
 * 鼠标右键菜单
 */

import React, {Component} from 'react';
class Menu extends Component {
    construct(props) {

    }
    doAction(e){
        alert(e)
    }
    componentDidMount(){
        const{setState} = this.props;
        var  self = this;
        setTimeout((e)=>{
            const _menu = $('#context-menu');
            const _canvas = $('.editor-canvas');
            const _widget = $('.btg-widget');
            const _line = $('.line-context-menu');
            _canvas.contextmenu({
                target: _menu,
                before: function(e) {
                    setState({menuType:"editorMenus"})
                },
                onItem: function (context, e) {
                    self.doAction(e.target.getAttribute("data-action"))
                }
            });
            _widget.contextmenu({
                target: _menu,
                before: function(e) {
                    setState({menuType:"widgetMenus"})
                },
                onItem: function (context, e) {
                    self.doAction(e.target.getAttribute("data-action"))
                }
            });
            _line.contextmenu({
                target: _menu,
                before: function(e) {
                    setState({menuType:"lineMenus"})
                },
                onItem: function (context, e) {
                    self.doAction(e.target.getAttribute("data-action"))
                }
            });
        }, 100);
    }
    render() {
        const{menuType, MENUS} = this.props
        var menus = MENUS[menuType];
        return (
            <div id="context-menu" className="editor-context-menu">
                <ul className="dropdown-menu context-munu-list" role="menu">
                    {
                        menus.map((menu) => {
                            return (
                                <li key={menu.action} disabled={menu.disabled} className={menu.disabled ? "disabled": ""}>
                                    <a tabIndex="-1" href="#" data-action={menu.action}>{menu.label}</a>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}
Menu.defaultProps = {
    MENUS: {
        editorMenus: [
            {
                action: 'paste',
                label: $._('Paste'),
                disabled: true
            }, {
                action: 'toggleAll',
                label: $._('Hide all'),
                showLabel: $._("Show all"),
                hideLabel: $._('Hide all')
            }, {
                action: 'toggleAllLine',
                label: $._('Hide all lines'),
                showLabel: $._("Show all lines"),
                hideLabel: $._('Hide all lines')
            }
        ],
        widgetMenus: [
            {
                action: 'copy',
                label: $._("Copy")
            }, {
                action: 'hideMe',
                label: $._('Hide')
            }, {
                action: 'toggleOther',
                label: $._('Hide other'),
                showLabel: $._('Show other'),
                hideLabel: $._('Hide other')
            }, {
                action: 'delete',
                label: $._('Delete widget')
            }
        ],
        lineMenus: [
            {
                action: 'delete',
                label: $._('Delete')
            }, {
                action: 'hideMe',
                label: $._("Hide line")
            }
        ],
        pointsMenus: [
            {
                action: 'delete',
                label: $._('Delete')
            }, {
                action: 'cancel',
                label: $._('Cancel')
            }
        ]
    }
}
export default Menu;
